<template>
    <view class="walletDetailsStyle">
        <scroll-view :scroll-x="true" class="tabStyle flex">
            <view v-for="item in tabList" :key="item.text" class="tabIconStyle" @click="()=>handleTabClick(item)">
                <text
                    :style="{ fontWeight: item.value == queryData.source ? 'bold' : '', fontSize: item.value == queryData.source ? '36rpx' : '32rpx' }">{{
                        item.text }}</text>
                <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/activeBot.svg"
                    v-if="item.value == queryData.source" class="activeIcon" />
            </view>
        </scroll-view>
        <scroll-view :scroll-y="true" class="bottomStyle" @scrolltolower="onScrollToLower" :style="{height: planList.length ? '100%' : 'auto'}">
            <view v-if="planList.length">
                <view class="detailItemStyle" v-for="(citem, i) in planList" :key="i">
                    <view class="flex between top">
                        <view >{{ citem.remark||"--" }}</view>
                        <view style="font-size: 28rpx">{{citem.changeAmount }}</view>
                    </view>
                    <view class="flex between bottom">
                        <view >{{ citem.createTime||"--" }}</view>
                        <view >余额：{{ citem.balanceAfter }}</view>
                    </view>
                </view>
                <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
            </view>
            <view v-else style="margin-top: 20%">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>

        </scroll-view>
    </view>
</template>

<script>
import { list } from './services/paymentService';


export default {
    name: 'walletDetailsPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // tab信息
            tabList: [
                { text: "全部", value: "" },
                { text: "收入", value: "1" },
                { text: "支出", value: "-1" },
                { text: "VIP会员", value: "2" },
                { text: "AI试题生成", value: "3" },
                { text: "人工题库", value: "4" },
                { text: "人脸识别", value: "5" },
            ],
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            queryData: {
                pageNo: 1, 
                pageSize: 10,
                queryType:"",
                queryKey:"",
                source:"",
                logType:1

            }
        };
    },
    methods: {
        // 初始化数据
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            list(queryData).then((res)=> {
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                // if (newListData.length >= res.totalCount) {
                if ( res.datas.length <1) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
        handleTabClick(item) {
            this.planList = []
            this.queryData = {
                ...this.queryData,
                source: item.value,
                pageNo: 1
            }
           
        }
    },
    mounted() {

    },
    watch: {
        queryData: {
            handler: function (val, oldVal) {
             
                this.onGetListData(val)
            },
            deep: true
        }
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    onShow() {
        this.queryData={...this.queryData}  
    },
    computed: {

    }
};
</script>

<style scoped lang="scss">
.walletDetailsStyle {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .tabStyle {
        padding: 42rpx 32rpx 0 32rpx;
        display: inline-block;
        white-space: nowrap;
    }

    .tabIconStyle {
        display: inline-flex;
        color: #666;
        font-size: 32rpx;
        margin-right: 46rpx;
        flex-direction: column;
        white-space: nowrap;

        .active {
            font-size: 36rpx;
            font-weight: 500;
        }

        .activeIcon {
            width: 72rpx;
            height: 50rpx;
            position: relative;
            transform: translateY(-50%);
        }
    }

    .bottomStyle {
        flex: 1;
        box-sizing: border-box;
        border-top: 6rpx solid #F5F5F5;
        background-color: #fff;

        /* 充值详情 */
        .detailItemStyle {
            padding-top: 57rpx;
            padding-bottom: 44rpx;
            border-bottom: 1px solid #f5f5f5;
            padding-left: 56rpx;
            padding-right: 34rpx;

            .top {
                color: #333333;
                font-size: 32rpx;
                margin-bottom: 20rpx;
                font-weight: bold;
            }

            .bottom {
                color: #999;
                font-size: 24rpx;
            }
        }
        
    }

}
::v-deep ::-webkit-scrollbar {
    display: none;
}
</style>